import { useEffect, useRef } from 'react';
import * as eCharts from 'echarts';
const ChartDemo = () => {
    let eChartsRef = useRef() // 唯一的元素
    useEffect(() => {
        console.log(eChartsRef.current);
        const myChart = eCharts.init(eChartsRef.current);
        let option = {
            title: {
                text: 'ECharts 入门实战'
            },
            tooltip: {},
            legend: {
                data: ["销量"]
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        }
        myChart.setOption(option)
    }, []) // 相当于小程序的onload
    return (
        // 不建议做dom编程 提供了ref 相当于id属性
        <div ref={eChartsRef} style={{
            width: 600,
            height: 400,
            margin: 100,
            backgroundColor: 'red'
        }} >
            ChartDemo
        </div>
    )
}
export default ChartDemo